<template>
  <div class="content-wrapper">
    <div class="content-container">
      <el-container>
        <!-- <el-aside class="tree-tainer" width="180px">
          <h6 class="info-color">货品分类</h6>
          <div class="filter-container">
            <div class="filter-item">
              <el-tooltip effect="dark" content="新建分类" placement="top">
                <el-button
                  class="filter-item"
                  size="mini"
                  round
                  circle
                  icon="el-icon-plus"
                />
              </el-tooltip>
              <el-tooltip effect="dark" content="编辑分类" placement="top">
                <el-button
                  class="filter-item"
                  size="mini"
                  round
                  circle
                  icon="el-icon-edit"
                />
              </el-tooltip>
              <el-tooltip effect="dark" content="删除分类" placement="top">
                <el-button
                  class="filter-item"
                  size="mini"
                  round
                  circle
                  icon="el-icon-delete danger-color"
                />
              </el-tooltip>
              <el-tooltip effect="dark" content="刷新" placement="top">
                <el-button
                  class="filter-item"
                  size="mini"
                  round
                  circle
                  icon="el-icon-refresh-right"
                />
              </el-tooltip>
            </div>
          </div>
          <div class="my-tree">
            <el-tree
              ref="categoryTree"
              :data="categoryTree"
              empty-text="未找到匹配的数据"
              :default-expand-all="true"
              :expand-on-click-node="false"
              :highlight-current="true"
              @node-click="handleCategoryNodeClick"
            />
          </div>
        </el-aside> -->
        <el-main>
          <el-form :inline="true" :model="listQuery" class="filter-container">
            <el-form-item label="状态">
              <el-select v-model="listQuery.status" size="mini" clearable>
                <el-option
                  v-for="item in statusOptions"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="货号">
              <el-input v-model="listQuery.goodsCode" type="text" size="mini" />
            </el-form-item>
            <el-form-item label="货品识别码">
              <el-input
                v-model="listQuery.goodsFullCode"
                type="text"
                size="mini"
              />
            </el-form-item>
            <el-form-item label="货品简称">
              <el-input v-model="listQuery.goodsAbbr" type="text" size="mini" />
            </el-form-item>
            <!-- <el-form-item label="供应商编号">
              <el-select size="mini" />
            </el-form-item> -->
            <el-form-item>
              <el-button
                class="filter-item"
                size="mini"
                round
                type="primary"
                icon="el-icon-search"
                @click="search"
              >
                搜索
              </el-button>
              <el-dropdown trigger="click" class="filter-item">
                <el-button size="mini" round icon="el-icon-plus">
                  新建<i class="el-icon--right button-icon" />
                </el-button>
                <el-dropdown-menu slot="dropdown" class="user-dropdown">
                  <el-dropdown-item>
                    <div @click="handleCreate">手工创建</div>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <div @click="handleImport">批量导入</div>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <!-- <el-button
                class="filter-item"
                size="mini"
                round
                icon="el-icon-top"
              >
                在售上架
              </el-button>
              <el-button
                class="filter-item"
                size="mini"
                round
                icon="el-icon-bottom"
              >
                停售下架
              </el-button> -->
            </el-form-item>
          </el-form>
          <el-table
            v-loading="listLoading"
            :data="list"
            align="left"
            height="500"
            highlight-current-row
          >
            <!-- <el-table-column type="selection" width="55" /> -->
            <el-table-column
              label="状态"
              prop="status"
              width="60px"
              fixed="left"
            >
              <template slot-scope="{ row }">
                {{ formatByKeyValue(statusOptions, row.status) }}
              </template>
            </el-table-column>
            <el-table-column
              label="货品识别码"
              prop="goodsFullCode"
              width="150px"
              fixed="left"
            />
            <el-table-column
              label="货号"
              prop="goodsCode"
              width="150px"
              fixed="left"
            />
            <el-table-column
              label="货品名称"
              prop="goodsName"
              min-width="150px"
              fixed="left"
            />
            <el-table-column
              label="货品简称"
              prop="goodsAbbr"
              width="120px"
              fixed="left"
            />
            <el-table-column
              label="中文名称"
              prop="goodsChineseName"
              min-width="150px"
            />
            <el-table-column label="单位" prop="unit" width="60px" />
            <!-- <el-table-column label="规格" prop="specification" width="80px" /> -->
            <el-table-column label="供应商编号" prop="supplierCode" width="100px" />
            <el-table-column
              label="2-8°C保质期"
              width="100px"
            >
              <template slot-scope="{ row }">
                <span v-if="row.qualityGuaranteePeriod > 0">{{ row.qualityGuaranteePeriod }}{{ formatByKeyValue(qualityGuaranteePeriodUnitOptions, row.qualityGuaranteePeriodUnit) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="-20°C保质期"
              width="100px"
            >
              <template slot-scope="{ row }">
                <span v-if="row.freezeQualityGuaranteePeriod > 0">{{ row.freezeQualityGuaranteePeriod }}{{ formatByKeyValue(qualityGuaranteePeriodUnitOptions, row.freezeQualityGuaranteePeriodUnit) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="配送要求"
              width="100px"
            >
              <template slot-scope="{ row }">
                {{ formatByKeyValue(deliveryOptions, row.deliveryRequirement) }}
              </template>
            </el-table-column>
            <el-table-column
              label="存储要求"
              width="120px"
            >
              <template slot-scope="{ row }">
                {{ formatByKeyValue(storageOptions, row.storageRequirement) }}
              </template>
            </el-table-column>
            <el-table-column
              label="货期"
              prop="productionDateLower"
              width="100px"
              :formatter="renderProductionDate"
            />
            <el-table-column label="备注" prop="memo" min-width="200px" />
            <el-table-column
              label="创建人"
              prop="createUserName"
              width="100px"
            />
            <el-table-column
              label="更新人"
              prop="updateUserName"
              width="100px"
            />
            <el-table-column label="更新时间" prop="updateTime" width="160px" />
            <el-table-column
              label="操作"
              align="center"
              width="80px"
              fixed="right"
            >
              <template slot-scope="{ row }">
                <el-dropdown trigger="click" class="filter-item">
                  <el-button type="text" class="el-icon-more" />
                  <el-dropdown-menu slot="dropdown" class="user-dropdown">
                    <el-dropdown-item @click.native="handleUpdate(row)">
                      编辑
                    </el-dropdown-item>
                    <el-dropdown-item @click.native="handleCopy(row)">
                      复制
                    </el-dropdown-item>
                    <!-- <el-dropdown-item @click.native="view(row)"
                      >货号变更</el-dropdown-item
                    >
                    <el-dropdown-item @click.native="view(row, 1)">在售上架</el-dropdown-item>
                    <el-dropdown-item @click.native="view(row, 1)">停售下架</el-dropdown-item>
                    <el-dropdown-item @click.native="view(row)"
                      >产品说明书</el-dropdown-item
                    > -->
                    <el-dropdown-item
                      @click.native="handleOpenBatchDialog(row)"
                    >
                      货品批次
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
          <Pagination
            v-show="total > 0"
            :total="total"
            :page-number.sync="listQuery.pageNumber"
            :page-size.sync="listQuery.pageSize"
            @pagination="getList"
          />
          <Save
            :visible.sync="dialogFormVisible"
            :dialog-status="dialogStatus"
            :current-row="currentRow"
            :unit-options="unitOptions"
            :category-options="categoryOptions"
            :quality-guarantee-period-unit-options="
              qualityGuaranteePeriodUnitOptions
            "
            :delivery-options="deliveryOptions"
            :storage-options="storageOptions"
            :production-date-unit-options="productionDateUnitOptions"
            @saveData="handleSaveData"
          />
          <Import
            :visible.sync="dialogFormVisibleImport"
            :category-options="categoryOptions"
            @importData="handleImportData"
          />
          <Batch :visible.sync="batchDialogVisible" :current-row="currentRow" />
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import Save from './components/save.vue'
import Import from './components/import.vue'
import Batch from './components/batch.vue'
import { formatByKeyValue } from '@/utils'
import { listDictTreeItem } from '@/api/base/dict.js'
import { pageGoods, listPreOptions } from '@/api/base/goods.js'

export default {
  components: { Pagination, Save, Import, Batch },
  data() {
    return {
      listLoading: false,
      total: 0,
      list: [],
      listQuery: {
        pageNumber: 1,
        pageIndex: 0,
        pageSize: 10,
        status: null,
        goodsCode: null,
        goodsAbbr: null
      },
      currentRow: null,
      statusOptions: null,
      qualityGuaranteePeriodUnitOptions: null,
      productionDateUnitOptions: null,
      categoryOptions: null,
      unitOptions: null,
      storageOptions: null,
      deliveryOptions: null,
      categoryTree: null,
      selectedCategoryNode: null,
      dialogFormVisible: false,
      dialogStatus: 'create',
      dialogFormVisibleImport: false,
      batchDialogVisible: false
    }
  },
  mounted() {
    listDictTreeItem({ dictGroupCode: 'goods_category' }).then((res) => {
      this.categoryTree = res.data
    })
    listPreOptions().then((res) => {
      const data = res.data || []
      this.statusOptions = data.status || []
      this.qualityGuaranteePeriodUnitOptions =
        data.qualityGuaranteePeriodUnit || []
      this.productionDateUnitOptions = data.productionDateUnit || []
      this.categoryOptions = data.goodsCategory || []
      this.unitOptions = data.goodsUnit || []
      this.storageOptions = data.goodsStorage || []
      this.deliveryOptions = data.goodsDelivery || []
      this.getList()
    })
  },
  methods: {
    formatByKeyValue,
    handleCategoryNodeClick(node) {
      this.selectedCategoryNode = node
      this.listQuery.category = this.selectedCategoryNode.value
      this.search()
    },
    getList() {
      this.listQuery.pageIndex = this.listQuery.pageNumber - 1
      this.listLoading = true
      pageGoods(this.listQuery)
        .then((response) => {
          this.list = response.data.rows
          this.total = response.data.total
        })
        .finally(() => {
          this.listLoading = false
        })
    },
    search() {
      this.listQuery.pageNumber = 1
      this.getList()
    },
    renderQualityGuaranteePeriod(row, column, cellValue, index) {
      let label = ''
      if (row.qualityGuaranteePeriod > 0) {
        label =
          row.qualityGuaranteePeriod +
          formatByKeyValue(
            this.qualityGuaranteePeriodUnitOptions,
            row.qualityGuaranteePeriodUnit
          )
      }
      return label
    },
    renderProductionDate(row, column, cellValue, index) {
      let label = ''
      if (row.productionDateLower > 0) {
        label = row.productionDateLower
      }
      if (row.productionDateLower > 0 && row.productionDateUpper > 0) {
        label += '-'
      }
      if (row.productionDateUpper > 0) {
        label += row.productionDateUpper
      }
      if (label !== '') {
        label += formatByKeyValue(
          this.productionDateUnitOptions,
          row.productionDateUnit
        )
      }
      return label
    },
    handleCreate() {
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
    },
    handleUpdate(row) {
      this.currentRow = row
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
    },
    handleCopy(row) {
      this.currentRow = row
      this.dialogStatus = 'copy'
      this.dialogFormVisible = true
    },
    handleSaveData(data) {
      if (this.dialogStatus === 'update') {
        const index = this.list.findIndex((v) => v.goodsId === data.goodsId)
        this.list.splice(index, 1, data)
      } else {
        this.search()
      }
    },
    handleImport() {
      this.dialogFormVisibleImport = true
    },
    handleImportData() {
      this.search()
    },
    view(row, index) {
      console.log(row)
    },
    handleOpenBatchDialog(row) {
      this.currentRow = row
      this.batchDialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
